<template>
  <div class="editGoods-container">

    <van-cell-group>
      <van-field v-model="title"
                 required
                 label="商品名"
                 placeholder="请输入商品名" />
      <van-field v-model="desc"
                 required
                 autosize
                 type="textarea"
                 show-word-limit
                 maxlength="50"
                 label="描述"
                 placeholder="请输入描述" />
      <van-field v-model="new_price"
                 required
                 label="新价格"
                 placeholder="请输入新价格" />
      <van-field v-model="old_price"
                 required
                 label="老价格"
                 placeholder="请输入老价格" />
      <van-field v-model="shop_name"
                 required
                 label="店铺名"
                 placeholder="请输入店铺名" />
      <van-field v-model="place"
                 required
                 label="发货地"
                 placeholder="请输入发货地"
                 @click="isShowMenu" />
      <van-action-sheet v-model="show">
        <van-area :area-list="areaList"
                  :columns-num="1"
                  title="省"
                  @confirm="yesMenu"
                  @cancel="isShowMenu" />
      </van-action-sheet>
      <van-uploader v-model="fileList"
                    multiple
                    :after-read="afterRead"
                    upload-text="轮播图展示">
      </van-uploader>
    </van-cell-group>

    <van-cell-group>
      <van-field v-model="params.brand"
                 required
                 label="品牌名称"
                 placeholder="请输入品牌名称" />
      <van-field v-model="params.add_time"
                 required
                 label="上市时间"
                 placeholder="请输入上市时间" />
      <van-field v-model="params.number"
                 required
                 label="证书编号"
                 placeholder="请输入证书编号" />
    </van-cell-group>

    <footer>
      <van-button type="info"
                  round
                  @click="editGoods(id)">修改商品</van-button>
    </footer>

  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      id: this.$route.query._id,
      uid: '',
      title: '',
      desc: '',
      new_price: '',
      old_price: '',
      shop_name: '',
      place: '',
      fileList: [],
      imgs: [],
      params: {},
      show: false,
      areaList: {
        province_list: {
          110000: '北京市',
          120000: '天津市',
          130000: '河北省',
          140000: '山西省',
          150000: '内蒙古自治区',
          210000: '辽宁省',
          220000: '吉林省',
          230000: '黑龙江省',
          310000: '上海市',
          320000: '江苏省',
          330000: '浙江省',
          340000: '安徽省',
          350000: '福建省',
          360000: '江西省',
          370000: '山东省',
          410000: '河南省',
          420000: '湖北省',
          430000: '湖南省',
          440000: '广东省',
          450000: '广西壮族自治区',
          460000: '海南省',
          500000: '重庆市',
          510000: '四川省',
          520000: '贵州省',
          530000: '云南省',
          540000: '西藏自治区',
          610000: '陕西省',
          620000: '甘肃省',
          630000: '青海省',
          640000: '宁夏回族自治区',
          650000: '新疆维吾尔自治区',
          710000: '台湾省',
          810000: '香港特别行政区',
          820000: '澳门特别行政区',
          900000: '海外'
        }
      }
    }
  },
  created() {
    this.initGoods(this.id)
  },
  methods: {
    // 初始化数据
    initGoods(_id) {
      this.axios.get('/goods/initGoods', { params: { _id } }).then(res => {
        this.title = res.data.goods.title
        this.uid = res.data.goods.uid
        this.desc = res.data.goods.desc
        this.new_price = res.data.goods.new_price
        this.old_price = res.data.goods.old_price
        this.shop_name = res.data.goods.shop_name
        this.place = res.data.goods.place
        this.imgs = res.data.goods.imgs
        this.params = res.data.goods.params
      })
    },
    // 是否展示底部省弹出框
    isShowMenu() {
      this.show = !this.show
    },
    // 底部省弹出框确认
    yesMenu(province) {
      this.place = province[0].name
      this.isShowMenu()
    },
    // 修改商品信息
    editGoods(id) {
      let goods = { _id: id, uid: this.uid, title: this.title, desc: this.desc, new_price: this.new_price, old_price: this.old_price, shop_name: this.shop_name, place: this.place, params: this.params, imgs: this.imgs }
      this.axios.post('/goods/editGoods', { ...goods }).then(res => {
        Toast(res.data.msg)
      })
    },
    // 上传图片
    afterRead(file) {
      let params = new FormData();
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      };
      if (file && file.length) {
        file.forEach(item => {
          params.append("banner", item.file)
        })
      } else {
        params.append("banner", file.file)
      }
      this.axios.post('/goods/upload', params, config).then(res => {
        if (res.data.code == 1) {
          this.imgs = res.data.imgs
        }
      })
    }
  }
}
</script>

<style lang="scss">
.editGoods-container {
  background-color: #eee;
  padding-bottom: 55px;
  .van-cell-group {
    margin-bottom: 0.3rem;
    .van-uploader__upload {
      margin: 0.2rem;
    }
    .van-uploader__preview {
      margin: 0.2rem;
    }
  }
  footer {
    padding: 0.3rem 0;
    background-color: #fff;
    text-align: center;
    .van-button {
      width: 80%;
    }
  }
}
</style>